<script lang="ts" setup>
import { type GreenCredit, getIsListedCompany, getGreenCreditF9 } from '../../../../apis';
import { useTable } from './useTable';
import PageHeader from '../../../../components/page-header.vue';
import IndicatorSource from '@/components/indicator-source/index.vue';
import message from 'vc/src/common/message';
import TimeDetail from './../../../../components/time-detail.vue';
import { useF9Context } from '@/views/modules/enterprise/use/use-context';

interface Props {
  title: string;
  menuId: string;
  count?: number;
}

const { title, menuId, count } = defineProps<Props>();

const { companyId } = useF9Context();
const requestParams = reactive<GreenCredit>({
  companyId: companyId,
  companyType: '',
  isKeyIndicators: false // 是否是主要指标，目前定死false
});

onMounted(async () => {
  // 获取公司类型
  const data = await getIsListedCompany(companyId);
  requestParams.companyType = data ? 1 : 2;
});

const {
  data: originData,
  run: getData,
  loading,
  error
} = useRequest(getGreenCreditF9, {
  defaultParams: [requestParams],
  manual: true,
  onSuccess: (data) => {
    if (data && (!data?.details || data?.details?.length === 0) && data?.hasParentCompanyData) {
      if (requestParams.companyType === 1) {
        requestParams.companyType = 2;
      } else {
        requestParams.companyType = 1;
      }
    }
  }
});

watch(
  () => requestParams,
  (val) => {
    getData(val);
  },
  {
    deep: true
  }
);

const isTraceSource = ref(false);
const { columns, tableData, showActionsheet, actionData, timeDetailShow, currentDetail, currentDetailName } = useTable(originData, isTraceSource);

const OPTIONS = ref([
  { name: '集团公司', code: 1 },
  { name: '本公司', code: 2 }
]);
const tips = $computed(() => {
  return requestParams.companyType === 1 ? '母公司' : '集团公司';
});

const companyTypeRef = ref();
const handleChange = (val) => {
  if (val === requestParams.companyType) return;

  if (!originData.value?.hasParentCompanyData) {
    message.warning({
      message: `本公司暂未披露${tips}口径的环境绩效数据`,
      duration: 2000
    });
    companyTypeRef.value.selectValue = requestParams.companyType;
  } else {
    requestParams.companyType = val;
  }
};
</script>

<template>
  <page-header class="mt-18px mb-15px" :count="count" :title="title" :menuId="menuId" is-small />
  <vc-empty-fail @click="getData(requestParams)" v-if="error" />
  <div class="container" v-else>
    <div class="tabs-right">
      <vc-single-select ref="companyTypeRef" :value="requestParams.companyType" title="数据归属" required :options="OPTIONS" @submit="handleChange" />
      <span>
        溯源
        <el-switch v-model="isTraceSource" size="small" style="--el-switch-on-color: #02C680" />
      </span>
    </div>
    <vc-nodata :type="203" v-if="tableData.length === 0" />
    <vc-table :loading="loading" :tableData="tableData" :columns="columns" v-else />
  </div>
  <time-detail v-if="timeDetailShow" v-model:show="timeDetailShow" :currentName="currentDetailName" :detail="currentDetail" @close="timeDetailShow = false" />
  <indicator-source v-model:show="showActionsheet" :actionData="actionData" />
</template>
<style lang="scss" scoped>
.tabs-right {
  text-align: right;
  font-size: 12px;
  line-height: 22px;
}
.container {
  :deep(.title) {
    font-weight: 600;
    font-size: 13px;
    line-height: 22px;
  }
}
</style>
